<template>
  <div class="block">
    <div class="edit">
      <img src="../../static/newimg/avatar.png" alt="" />
      <span>雾灵山管理员</span>
      <img src="../../static/newimg/edit.png" alt="" @click.stop="gohome" />
    </div>
    <div class="imgBox">
      <img src="../../static/newimg/head.png" alt="" />
    </div>
    <div class="bannerBox">
      <carousel-3d
        controlsVisible="true"
        :width="440"
        :height="568"
        :perspective="0"
        :space="400"
        :border="0"
        :inverseScalin="4"
        :controls-prev-html="'&#10092;'"
        :controls-next-html="'&#10093;'"
        :controls-width="30"
        :controls-height="60"
        :clickable="true"
        :display="7"
      >
        <slide v-for="(slide, i) in navl" :index="i" :key="i"  >
          <img
            :src="arr.indexOf(slide.nams) == -1 ? slide.img : slide.img"
            alt=""
            class="imgs"
          />
          <img :src="slide.code" alt="" v-show="slide.id == '010'" class="img_code">
          <span class="spans" v-show="arr.indexOf(slide.nams) == -1">暂未开通...</span>
          <div :class="arr.indexOf(slide.nams) == -1 ? 'disableCuesor' : ''">
            <div class="nav-s"   @click="openlink(slide)" :class="arr.indexOf(slide.nams) == -1 ? 'disablePointer' : ''">
            <div class="navTop">
              <p>{{ slide.name }}</p>
              <img :src="slide.ico" alt="" class="img_icon" />
            </div>
            <div style="color: #fff;margin-top: .16rem;">
              {{ slide.title }}
            </div>
          </div>
          </div>
         
        </slide>
      </carousel-3d>
    </div>
  </div>
</template>
<script>
import http from "../utils/http";
import api from "../utils/api";
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  components: {
    Carousel3d,
    Slide
  },
  data() {
    return {
      token: "",
      navl: [
        {
          id: "001",
          name: "感知大屏",
          nams: "SHOW",
          title: "Perception large screen",
          path: "/cmpb?token=",
          img: "/static/newimg/9.png",
          // blackimg:"/static/newimg/black/h9.png",
          ico: "/static/newimg/9-9.png"
        },
        {
          id: "002",
          name: "日常巡护",
          nams: "PATROL",
          title: "Daily Patrol",
          path: "/pmt?token=",
          img: "/static/newimg/2.png",
          // blackimg:"/static/newimg/black/h2.png",
          ico: "/static/newimg/2-2.png"
        },
        {
          id: "003",
          name: "动物监测",
          nams: "BIRDS",
          title: "Animal monitoring",
          path: "/nljk?token=",
          img: "/static/newimg/3.png",
          // blackimg:"/static/newimg/black/h3.png",
          ico: "/static/newimg/3-3.png"
        },
        {
          id: "004",
          name: "人类活动",
          nams: "HUMAN_ACTIVITIES",
          path: "/human/index?token=",
          title: "Human activity",
          img: "/static/newimg/4.png",
          // blackimg:"/static/newimg/black/h4.png",
          ico: "/static/newimg/4-4.png"
        },
        {
          id: "005",
          name: "新闻公告",
          nams: "WEB_PORTAL",
          title: "News bulletin",
          path: "/xwgg?token=",
          img: "/static/newimg/5.png",
          // blackimg:"/static/newimg/black/h5.png",
          ico: "/static/newimg/5-5.png"
        },
        {
          id: "006",
          name: "用户管理",
          nams: "USER_MANAGE",
          title: "News bulletin",
          path: "/yhgl?token=",
          img: "/static/newimg/6.png",
          // blackimg:"/static/newimg/black/h6.png",
          ico: "/static/newimg/6-6.png"
        },
        {
          id: "007",
          name: "红外相机",
          nams: "CAMERA",
          title: "Infrared camera",
          img: "/static/newimg/7.png",
          path: "/camera?token=",
          // blackimg:"/static/newimg/black/h7.png",
          ico: "/static/newimg/7-7.png"
        },
        {
          id: "008",
          name: "生态评估",
          nams: "ECOSYSTEMs",
          title: "Ecological assessment",
          img: "/static/newimg/8.png",
          // blackimg:"/static/newimg/black/h8.png",
          ico: "/static/newimg/8-8.png"
        },
        {
          id: "009",
          name: "本底资源库",
          nams: "RES",
          title: "Background resource library",
          path: "/bdzy?token=",
          img: "/static/newimg/1.png",
          // blackimg:"/static/newimg/black/h1.png",
          ico: "/static/newimg/1-1.png"
        },
        {
          id: "010",
          name: "APP下载",
          nams: "MOBILE_CLIENT",
          code:"/static/newimg/10code.png",
          title: "Perception large screen",
          img: "/static/newimg/10.png",
          // blackimg:"/static/newimg/10.png",
          ico: "/static/newimg/10-10.png"
        }
      ],
      isapp: false,
      arr: [],
      // isClickable: true
    };
  },
  created() {
    let arr = JSON.parse(window.sessionStorage.getItem("authority"));
    console.log(arr);
    let list = [];
    arr.forEach(e => {
      let z = JSON.parse(e.authority).moduleEn;
      console.log(z);
      list.push(z);
    });

    this.arr = list;
    // console.log(this.arr);
  },
  mounted() {},

  methods: {
    openlink(data) {
    console.log(data , 1111);
    if(data.id == '010'){
      return
    }
      let token = window.sessionStorage.getItem("token");
      window.open(data.path + token);
      console.log(data.path + token);
    },
    gohome() {
      window.sessionStorage.removeItem("token");
      this.$router.push("/");
    }
  }
};
</script>
<style>
.block {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../../static/newimg/Backgroundimage.png) no-repeat;
  background-size: 100% 100%;
}
.imgBox {
  position: absolute;
  top: 1.01rem;
  left: 5.59rem;
  width: 7.72rem;
}
.bannerBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  /* width: 100%; */
  height: 6.6rem;
}
.carousel-3d-slide.current {
  position: relative;
  border-radius: .4rem .4rem .4rem .4rem !important;
}
.carousel-3d-slide {
  border-radius: .4rem .4rem .4rem .4rem !important;
}
.imgs {
  border-radius: .4rem .4rem 0 0 !important;
}
.img_code{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1.3rem;
    margin-top: -1.9rem;
    width: 2.6rem !important;
    height: 2.6rem;
}
.nav-s {
  height: 1.68rem;
  width: 4.4rem;
  padding: .4rem;
  background-color:#387BFF !important; 
  border-radius: 0 0 .4rem .4rem !important;
  /* border: 3px solid rgb(207, 209, 231) !important; */
  border-top: 0 !important;
}
.navTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-family: "BOLD";
}
.navTop > p {
  font-size: .34rem;
}
.img_icon {
  width: .48rem !important;
  height: .48rem;
}
.edit {
  position: absolute;
  top: .4rem;
  right: .6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 2.26rem;
  height: .32rem;
}
.edit > img:nth-child(1) {
  width: .32rem;
  height: .32rem;
}
.edit > img:nth-child(2) {
  width: .26rem;
  height: .26rem;
}
.edit > span {
  color: #fff;
  font-size: .2rem;
}
.spans{
  position: absolute;
  left: 1.5rem;
  top: 1.86rem;
  color: rgba(255, 255, 255);
  font-size: .3rem;
}
.disableCuesor{
  cursor: not-allowed;
}
.disablePointer {
  pointer-events: none;
}
</style>
